<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 图片跟随鼠标
const image = ref<HTMLImageElement>()
const imgStyle = ref("")

// 扩展Window接口
declare global {
  interface Window {
    electronAPI: {
      onMouseDownMsg: (callback: () => void) => void;
      onMouseUpMsg: (callback: () => void) => void;
      ReadFile: (image: string) => string | null;
      SetTop: (isTop: boolean) => void;
      SetPos: (settings: { imageSizeX: number; imageSizeY: number; imageOffsetX: number; imageOffsetY: number }) => void;
      onSettingMsg: (callback: () => void) => void;
    }
  }
}

const imageSrc = ref("")

// 获取localStorage中的值
const localStorage = window.localStorage
let imageSizeX: string | null = null
let imageSizeY: string | null = null
let imageOffsetX: string | null = null
let imageOffsetY: string | null = null
let imageAlpha: string | null = null
const GetPositionSetting = () => {
  imageSizeX = localStorage.getItem('imageSizeX')
  imageSizeY = localStorage.getItem('imageSizeY')

  imageOffsetX = localStorage.getItem('imageOffsetX')
  imageOffsetY = localStorage.getItem('imageOffsetY')

  if (imageSizeX == null) {
    imageSizeX = "1240"
    imageSizeY = "1940"
  }

  if (imageOffsetX == null) {
    imageOffsetX = "234"
    imageOffsetY = "817"
  }
  imageAlpha = localStorage.getItem('imageAlpha')
  if (imageAlpha == null) imageAlpha = "100"
}
let mousePos = { x: 0, y: 0 }

const GetHandPic = async (pic_path: string) => {
  let data = await window.electronAPI.ReadFile(pic_path)
  // 创建 data URL
  const dataURL = `data:image/png;base64,${data}`;
  return dataURL
}
const isLoadDone = ref(false)

onMounted(async () => {
  // 获取图片数据
  let handHover = await GetHandPic('/handHover.png')
  let handClick = await GetHandPic('/handClick.png')
  imageSrc.value = handHover
  isLoadDone.value = true
  // 置顶设置
  let isTop = localStorage.getItem('isTop')
  if (isTop == null) isTop = "false"
  window.electronAPI.SetTop(isTop === "true")

  // 图片偏移设置
  GetPositionSetting()
  imgStyle.value = `
      width: ${imageSizeX}px;
      height: ${imageSizeY}px;
      opacity: ${Number(imageAlpha) / 100};
      `
  document.addEventListener('mousemove', (e) => {
    if (image.value == null) return
    mousePos = { x: e.pageX, y: e.pageY }
    imgStyle.value = `
      width: ${imageSizeX}px;
      height: ${imageSizeY}px;
      transform: translate(${e.pageX - Number(imageOffsetX)}px, ${e.pageY - Number(imageOffsetY)}px);
      transition: all 0.01s linear;
      position: absolute;
      overflow: hidden;
      opacity: ${Number(imageAlpha) / 100};
      `
  })
  window.electronAPI.onMouseDownMsg(() => {
    // 切换图片
    imageSrc.value = handClick
  })
  window.electronAPI.onMouseUpMsg(() => {
    imageSrc.value = handHover
  })
  // 设置配置消息响应
  window.electronAPI.onSettingMsg(() => {
    GetPositionSetting()
    if (image.value == null) return
    imgStyle.value = `
      width: ${imageSizeX}px;
      height: ${imageSizeY}px;
      transform: translate(${mousePos.x - Number(imageOffsetX)}px, ${mousePos.y - Number(imageOffsetY)}px);
      transition: all 0.01s linear;
      position: absolute;
      overflow: hidden;
      opacity: ${Number(imageAlpha) / 100};
      `
  })
})
</script>

<template>
  <div v-if="isLoadDone">
    <div class="workarea">
      <img ref="image" :style="imgStyle" :src="imageSrc" />
    </div>
  </div>
  <div v-else style="display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh;">加载中</div>
</template>

<style scoped>
.workarea {
  margin: 0;
  padding: 0;
  background: transparent;
}
</style>
